<template>
  <div>
    <!--
      1. action 必选参数，上传的地址, 组件内部会自动帮助你发起请求
      但是, 我们不需要它自动的帮助我们发请求, 后边, 我们会用自己的方式

      2. list-type	文件列表的类型, 文件展示的类型以照片墙的形式展示

      3. file-list 文件列表数组

      4. on-preview 当你点击照片墙中图片中的+时, 会自动触发, 调用一个函数, 会把当前的图片文件作为参数传递

      5. limit 限制用户上传图片的数量

      6. on-remove
      当你点击垃圾篓的时候会自动触发
      会接收一个函数, 函数会有两个参数: file, fileList
      file: 是被删除的那个文件对象
      fileList: 返回最新的文件列表 (结构中的列表, 不是数据中的列表)

        7. http-request
       覆盖默认的上传行为，可以自定义上传的实现
       接收的是一个函数 函数接收一个参数: 对象 (obj.file -- 就是要上传的文件对象)
       一旦配置了自定义上传, 当选择一张图片时, 默认会以本地预览的形式展示图片
       类似于: blob:http://localhost:8888/bc04f586-b0c1-48bd-9102-46f7ddf32926
       临时生成一个本地图片用于预览, 增强用户体验

        8. on-change
       文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
       接收的是一个函数 function(file, fileList)

        9. before-upload
       图片文件在真正上传之前触发, 接收的是一个函数   function(file)
       一般用于校验图片的格式或者图片的大小...
     -->
    <el-upload
      action="#"
      list-type="picture-card"
      :file-list="fileList"
      :on-preview="handlePreview"
      :class="{disable: isDisabled}"
      :limit="limit"
      :on-remove="handleRemove"
      :http-request="handleUpload"
      :on-change="handleChange"
      :before-upload="handleBeforeUpload"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <!-- 对话框 -->
    <el-dialog title="图片预览" :visible="diglogVisible" @close="diglogVisible=false">
      <img :src="dialogImgUrl" style="width: 100%;">
    </el-dialog>
    <!-- 进度条 -->
    <!-- <el-progress
      :text-inside="true"
      :stroke-width="16"
      :percentage="percentage"
      style="width: 200px;"
    /> -->
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5' // 导入腾讯云的包(sdk)
const cos = new COS({
  SecretId: 'AKIDgCTVIq9C0YqtgEWZNvEI6ex0oMfiV2JO', // 身份识别ID
  SecretKey: 'tZ0C9qIUQ7ZlhOp0wc2D8nDNIxNXYP3S' // 身份秘钥
})
export default {
  name: 'UploadImage',
  props: {
    // 1. 图片上传的最大数量
    limit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      // 1. 上传文件列表
      fileList: [
        // { url: 'https://img1.baidu.com/it/u=4216761644,15569246&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500' }
        // { url: 'https://img0.baidu.com/it/u=18497219,172601761&fm=253&fmt=auto&app=138&f=PNG?w=519&h=500' }
      ],
      // 2. 图片对话框的显示和隐藏
      diglogVisible: false,
      // 3. 用于展示图片的url地址
      dialogImgUrl: '',
      // 4. 控制进度条的百分比
      percentage: 0
    }
  },
  computed: {
    // 1. 控制上传加号的显示和隐藏
    isDisabled() {
      return this.fileList.length >= this.limit
    },
    // 2. 判断组件中的所有图片是否都上传成功了
    isAllUploadSuccess() {
      return this.fileList.every(item => item.status === 'success')
    }
  },
  methods: {
    // 1. 图片预览
    handlePreview(file) {
      // console.log(file)
      this.dialogImgUrl = file.url
      this.diglogVisible = true
    },
    // 2.点击删除图片
    // file: 你当前删除的图片文件对象
    // fileList: 结构中的文件列表
    // this.fileList: 自己的文件列表
    handleRemove(file, fileList) {
      // console.log(file, fileList)
      // 不推荐, 可能会造成致命bug
      // this.fileList = fileList

      // 方式一:
      // this.fileList = this.fileList.filter(item => item.uid !== file.uid)

      // 方式二:
      // 引用数据类型不能直接赋值, 要深拷贝后再赋值(形成独立的数据数组)
      this.fileList = [...fileList]
    },
    // 3. 自定义上传操作
    handleUpload(obj) {
      // 3.0 从本地数组中找到对应的图片对象
      const uid = obj.file.uid
      const file = this.fileList.find(item => item.uid === uid)

      // 在上传前, 设置文件的状态为uploading
      file.status = 'uploading'

      // 使用腾讯云SDK上传图片文件到存储桶
      cos.putObject({
        Bucket: 'hrsass-99-1312445828', /* 填入您自己的存储桶，必须字段 */
        Region: 'ap-shanghai', /* 存储桶所在地域，例如ap-beijing，必须字段 */
        Key: 'hrsass-99-' + parseInt(Math.random() * 99999) + obj.file.name, /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
        StorageClass: 'STANDARD',
        Body: obj.file, // 上传文件对象
        onProgress: (progressData) => {
          // console.log(JSON.stringify(progressData))
          // 更新进度条
          // this.percentage = parseInt(progressData.percent * 100)
          // console.log(this.percentage)
          file.percentage = parseInt(progressData.percent * 100)
        }
      }, (err, data) => {
        // 判断
        if (err) {
          this.$message.error('图片上传失败!')
          return
        }

        // 3.1 更新当前上传对应图片的状态
        // 如果网速太快, 你看不到进度效果, 稍作延迟让用户体验更好
        setTimeout(() => {
          file.status = 'success'
        }, 500)

        // 3.2 更新当前对象内部的url地址
        file.url = 'https://' + data.Location
      })
    },
    // 4. 上传图片成功或失败
    handleChange(file, fileList) {
      // console.log(file, fileList)
      // 手动同步结构中的fileList 和 数据中的fileList
      this.fileList = [...fileList]
    },
    // 5. 文件上传之前的校验
    // file: 添加的文件对象
    handleBeforeUpload(file) {
      // console.log(file)
      // this.$message.error('不允许上传')
      // return false

      // 大小校验
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传头像的大小不能超过2MB!')
        return false
      }
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
  .disable {
    ::v-deep {
      .el-upload--picture-card{
        display: none;
      }
    }
  }
</style>
